<template>
  <div ref="refChart" :style="{ height: kHTwo + 'px'}"></div>
</template>

<script>
import theme from '../../assets/theme/theme'

export default {
  name: 'C2',
  data() {
    return {
      chartInstance: null,
      allData: [],
      kHTwo: null,
      // 屏幕自适应定时器
      screenTimer: null,
      // 数据刷新定时器
      dataTimer: null,
      // 获取浏览器可视区域高度（包含滚动条）、 window.innerHeight
      // 获取浏览器可视区域高度（不包含工具栏高度）、document.documentElement.clientHeight
      // 获取body的实际高度  (三个都是相同，兼容性不同的浏览器而设置的) document.body.clientHeight
      screenHeight: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
      screenWidth: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
    }
  },
  beforeMount() {
    this.kHTwo = Math.round(this.screenHeight * 0.44)
  },
  mounted() {
    // 页面大小改变时触发
    window.addEventListener('resize', this.getScreenHeight, false);
    // 页面大小改变时触发
    window.addEventListener('resize', this.getScreenWidth, false);
    this.resizeScreen();
    // 图表初始化
    this.initChart();
    // 屏幕自适应
    window.addEventListener("resize", this.screenAdapter);
    this.screenAdapter();
    // 数据刷新定时器
    this.getDataTimer();
  },
  beforeDestroy() {
    // 销毁Echarts图表
    this.chartInstance.dispose();
    this.chartInstance = null;
  },
  destroyed() {
    // 清除自适应屏幕定时器
    clearInterval(this.screenTimer);
    this.screenTimer = null;
    // 清除数据刷新定时器
    clearInterval(this.dataTimer);
    this.dataTimer = null;
    // 页面大小改变时触发
    window.removeEventListener('resize', this.getScreenHeight, false);
    // 页面大小改变时触发
    window.removeEventListener('resize', this.getScreenWidth, false);
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    resizeScreen() {
      this.screenTimer = setInterval(() => {
        this.getScreenHeight();
        this.getScreenWidth();
      }, 200)
    },
    // 获取浏览器高度进行自适应
    getScreenHeight() {
      this.screenHeight = window.innerHeight || document.documentElement.innerHeight || document.body.clientHeight;
      // 四舍五入取整数
      this.kHTwo = Math.round(this.screenHeight * 0.44);
    },
    // 字体大小根据宽度自适应
    getScreenWidth() {
      this.screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    },
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.refChart, theme);
      const initOption = {
        title: {
          text: '银行机构客户信息核查情况统计表',
          left: 'center'
        },
        legend: {
          data: ['个人', '单位'],
          // 图例组件离容器左侧的距离
          right: 'top',
          // 图例内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。
          padding: [30, 10, 30, 10],
          itemHeight: 10,
          itemWidth: 20,
        },
        radar: {
          // 设置成相对的百分比
          shape: 'square',
          splitNumber: 5,
          center: ['50%', '55%'],
          indicator: [
            {name: '发起实时核查请求', max: 6500},
            {name: '实时核查结果反馈', max: 16000},
            {name: '发起批量核查请求', max: 30000},
            {name: '批量结果反馈', max: 38000},
            {name: '可疑线索报送', max: 52000},
            {name: '可疑线索撤销', max: 25000}
          ],
          // 设置雷达图中间射线的颜色
          axisLine: {
            lineStyle: {
              color: '#c0c0c0',
            },
          },
          //网格颜色设置
          splitLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: '#c0c0c0',
            },
          },
          //修改indicator文字的颜色
          name: {
            textStyle: {
              color: "#ffffff"
            }
          }
        },
        series: [
          {
            name: '次数',
            type: 'radar',
            // 单个数值点的样式，还可以取值'rect','angle'等
            symbol: 'circle',
            // 数值点的大小
            symbolSize: 6,
            // label: {
            //   show: true
            // },
            data: [
              {
                value: [4200, 3000, 20000, 35000, 50000, 18000],
                name: '个人'
              },
              {
                value: [5000, 14000, 28000, 26000, 42000, 21000],
                name: '单位'
              }
            ]
          }
        ]
      }
      // 图表初始化配置
      this.chartInstance.setOption(initOption);
    },
    screenAdapter() {
      this.titleFontSize = (this.$refs.refChart.offsetWidth / 100) * 1.8;
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: Math.round(this.titleFontSize * 1.5),
          },
        },
        // 圆点分类标题
        legend: {
          textStyle: {
            fontSize: Math.round(this.titleFontSize * 1.5),
          },
        }
      };
      // 图标自适应变化配置
      this.chartInstance.setOption(adapterOption);
      this.chartInstance.resize();
    },
    // 定时器
    getDataTimer() {
      this.dataTimer = setInterval(() => {
        // 执行刷新数据的方法
        // this.getData();
      }, 5000)
    }
  }
}
</script>
